import { PureComponent } from "react";
import { Button, Modal,ActivityIndicator,InputItem } from "antd-mobile"
import { connect } from 'dva';
import { handleImg, goToPage,isNull } from "../../utils/helper";
import MToast from '../../components/Util/MToast';
import {IntlProvider, addLocaleData,FormattedMessage} from 'react-intl';
import localeData from '../../../public/lang/data.json';
import Product from '../../../public/image/myCoupon.png';
import CouponUsed from '../../../public/image/couponUsed.png';
import CouponEnd from '../../../public/image/couponEnd.png';
import "./PlaceOrder.less"
import { Tabs } from 'antd';

const { TabPane } = Tabs;
const myCoupon={
  width:'100%',
  height:'80px',
  marginBottom:'16px',
  backgroundImage: 'url(' + Product + ')',
  backgroundRepeat: 'no-repeat',
  backgroundSize: '100% 80px',
}
const couponEnd={
  width:'100%',
  height:'80px',
  marginBottom:'16px',
  backgroundImage: 'url(' + CouponEnd + ')',
  backgroundRepeat: 'no-repeat',
  backgroundSize: '100% 80px',
}
const couponUsed={
  width:'100%',
  height:'80px',
  marginBottom:'16px',
  backgroundImage: 'url(' + CouponUsed + ')',
  backgroundRepeat: 'no-repeat',
  backgroundSize: '100% 80px',
}
@connect(() => {
  return ({

  })
})
export default class MyCoupon extends PureComponent{
  constructor(props){
    super(props);
    this.state = {
      couponsWait:[],
      couponsEnd: [],//表示优惠券已结束
      couponsUsed:[],//表示优惠券已使用

      visOver:false,//是否有优惠券

    }
  }
  componentWillMount(){
    let {dispatch,location} = this.props;
    dispatch({
      type: "global/setHeaderTitle",
      payload: {
        title: localeData[localStorage.locale].coupon,
        path: location.pathname + location.search
      }
    });

  }
  componentDidMount(){
    let { dispatch, location } = this.props;
    dispatch({
      type: "login/selectCoupons",
      payload: {
        "phone":localStorage[MI_APP_CODE + "phone"],

        callback: (result) => {
          console.log(result)
          let { data,code } = result;
          if (code == 10200) {
            let couponsList = data.data.couponsList
             if(couponsList!==null){
               console.log("3444")
               let couponsNew = couponsList.filter((element) => (element.enabled == 1))//表示优惠券还在继续
               let couponsEnd = couponsList.filter((element) => (element.enabled == 2))//表示优惠券已结束
               let couponsUsed = couponsList.filter((element) => (element.enabled == 3))//表示优惠券已使用
               this.setState({
                 couponsWait:couponsNew,
                 couponsEnd:couponsEnd,
                 couponsUsed:couponsUsed,
                 visOver:true
               })
             }else{
               this.setState({
                 visOver:false
               })
             }

          }
       else{
            MToast.info(localeData[localStorage.locale].newLoginTitle10)
          }
        }
      }
    });

  }
  callback=(key)=>{
    console.log(key);
  }
  couponClick(item){
    let { dispatch, location } = this.props;
    localStorage[MI_APP_CODE + "couponCode"] = item.code;
    goToPage({ dispatch, config: { url: "/couponCode" }, })

  }
  render(){
    let {dispatch} = this.props;
    let {couponsWait,visOver,couponsUsed,couponsEnd} = this.state;
    const messages = localeData[localStorage.locale];
    return(
      <IntlProvider
        locale={ localStorage.locale } messages={messages}
      >
     <div style={{height:"100%"}}>
       <div style={{paddingTop:"47px"}}>
         {visOver? <Tabs defaultActiveKey="1" onChange={this.callback} tabBarGutter="30px">
           <TabPane tab={messages.coupon13} key="1">
             {
               couponsWait.map((item, k) => {
                 let { condations_of_use, coupons_end_date, coupons_price, coupons_start_date, overdueCount,sale_date} = item;
                 return(
                   <div style={{padding:'0 24px'}} onClick={this.couponClick.bind(this,item)}>
                     <div style={myCoupon}>
                       <div style={{overflow:'hidden'}}>
                         <div style={{float:'left',width:'31%',padding:'10px 0'}}>
                           <p style={{color:'#fff',fontSize:"13px",textAlign:"center",margin:'0px'}}>满{condations_of_use}€减</p>
                           <p style={{color:"#fff",textAlign:'center',margin:'0px',position:'relative'}}><span style={{fontSize:"18px",position:'absolute',top:'6px',left:'36px'}}>€</span><span style={{fontSize:"32px"}}>{coupons_price}</span></p>
                         </div>
                         <div style={{float:'left',width:'68%'}}>
                           <p style={{margin:'12px 16px 16px 16px',color:'#181B19',fontSize:'15px',fontWeight:'500'}}>{coupons_start_date}至{coupons_end_date}</p>
                           <p style={{marginLeft:'16px'}}>
                             {overdueCount==0?<span style={{marginLeft:'77px'}}></span>:<span style={{color:"#FF5722",}}>还有{overdueCount}天过期</span>}
                             <span style={{width: '64px',
                               height: '20px',
                               border: '2px solid #03b0a9',
                               borderRadius: '12px',
                               color:'#03B0A9',fontSize:'10px',padding:'4px 12px',marginLeft:'25%'}}>{messages.coupon10}</span></p>
                         </div>
                       </div>
                     </div>
                   </div>
                 )



               })
             }
           </TabPane>
           <TabPane tab={messages.coupon14} key="2">
             {
               couponsUsed.map((item, k) => {
                 let { condations_of_use, coupons_end_date, coupons_price, coupons_start_date, overdueCount,code,sales_order_code,sale_date} = item;
                 return(
                   <div style={{padding:'0 24px'}}>
                     <div style={couponUsed}>
                       <div style={{overflow:'hidden'}}>
                         <div style={{float:'left',width:'31%',padding:'10px 0'}}>
                           <p style={{color:'#fff',fontSize:"13px",textAlign:"center",margin:'0px'}}>满{condations_of_use}€减</p>
                           <p style={{color:"#fff",textAlign:'center',margin:'0px',position:'relative'}}><span style={{fontSize:"18px",position:'absolute',top:'6px',left:'36px'}}>€</span><span style={{fontSize:"32px"}}>{coupons_price}</span></p>
                         </div>
                         <div style={{float:'left',width:'68%'}}>
                           <p style={{margin:'12px 16px 16px 16px',color:'#181B19',fontSize:'13px',fontWeight:'500'}}>{messages.coupon16}:{sales_order_code}</p>
                           <p style={{margin:'12px 16px 16px 16px',color:'#181B19',fontSize:'13px',fontWeight:'500'}}>
                             {messages.coupon17}:{sale_date}
                           </p>
                         </div>
                       </div>
                     </div>
                   </div>
                 )



               })
             }
           </TabPane>
           <TabPane tab={messages.coupon15} key="3">
             {
               couponsEnd.map((item, k) => {
                 let { condations_of_use, coupons_end_date, coupons_price, coupons_start_date, overdueCount,} = item;
                 return(
                   <div style={{padding:'0 24px'}}>
                     <div style={couponEnd}>
                       <div style={{overflow:'hidden'}}>
                         <div style={{float:'left',width:'31%',padding:'10px 0'}}>
                           <p style={{color:'#fff',fontSize:"13px",textAlign:"center",margin:'0px'}}>满{condations_of_use}€减</p>
                           <p style={{color:"#fff",textAlign:'center',margin:'0px',position:'relative'}}><span style={{fontSize:"18px",position:'absolute',top:'6px',left:'36px'}}>€</span><span style={{fontSize:"32px"}}>{coupons_price}</span></p>
                         </div>
                         <div style={{float:'left',width:'68%'}}>
                           <p style={{margin:'30px 16px',color:'#181B19',fontSize:'14px',fontWeight:'500'}}>{coupons_start_date}至{coupons_end_date}</p>
                         </div>
                       </div>
                     </div>
                   </div>
                 )



               })
             }
           </TabPane>
         </Tabs>:<div style={{textAlign:'center'}}>暂无可用优惠券</div>}

       </div>

      </div>
      </IntlProvider>
    )
  }
}
